<template>
  <div id="body">
    <div id="head">
      <h1> 学 院 毕 业 生 就 业 指 导 信 息 平 台 </h1>
    </div>
    <div id="main">
      <div>
        <div class="login-item">
          <RouterLink :to="{name: 'enterprise-login', replace: true}">
            <img src="/src/assets/images/enterprise-logo.png" alt="2">
            <br><span>企 业 登 录</span>
          </RouterLink>
        </div>

        <div class="login-item">
          <RouterLink :to="{name:'graduate-login',replace: true}">
            <img src="/src/assets/images/graduate-logo.png" alt="2">
            <br><span>毕 业 生 登 录</span>
          </RouterLink>
        </div>

        <div class="login-item">
          <RouterLink :to="{name:'admin-login',replace: true}">
            <img src="/src/assets/images/admin-logo.png" alt="2">
            <br><span>管 理 员 登 录</span>
          </RouterLink>
        </div>

        <div class="register-item">
          <RouterLink :to="{name:'register',replace: true}">
            <span>毕 业 生 未 注 册 账 号，去 注 册</span>
          </RouterLink>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

</script>

<style scoped>
#body {
  min-width: 1200px;
  min-height: 700px;
  background: url("/src/assets/images/background.png") no-repeat;
  background-size: cover;
}

#head {
  text-align: center;
  padding-top: 40px;
}

#main {
  margin-top: 20px;
  min-width: 1000px;
  min-height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-item {
  display: inline-block;
  min-width: 300px;
  width: 300px;
  min-height: 300px;
  margin: 10px;
  border: 3px groove;
}

.register-item {
  min-width: 900px;
  min-height: 50px;
  margin: 10px;
  border: 3px groove;
}

a {
  display: inline-block;
  width: 100%;
  height: 298px;
  color: grey;
  text-align: center;
  text-decoration: none;

}

.register-item > a {
  height: 50px;
  background: plum;
  color: whitesmoke;
}

a:hover {
  color: cornflowerblue;
  text-decoration: underline;
}

span {
  font-size: 35px;
  font-weight: 500;
}

img {
  width: 99%;
  height: 80%;
  border-bottom: 2px gray solid;
  opacity: 0.8;
}

</style>